<template>
  <div>
    <el-card class="contain">
      <div class="works">
        <div
            :class="navShow === 0 ? 'active' : ''"
            @mouseenter="navShow = 0"
            @mouseleave="navShow = -1"
            @click="Integrated">


          <div v-if="checkNav !== 0" @click="compRehen">综合</div>
          <div v-else :class="checkNav === 0 ? 'active' : ''">
            综合排序
          </div>
        </div>
        <div
            :class="navShow === 1 ? 'active' : ''"
            @mouseenter="navShow = 1"
            @mouseleave="navShow = -1"
            @click="SellCountDesc"
        >
          <div v-if="checkNav !== 1" @click="ss">销量</div>
          <div v-else :class="checkNav === 1 ? 'active' : ''">
            销量由高到低
          </div>
        </div>
        <div
            class="sc_order_item"
            :class="navShow === 2 ? 'active' : ''"
            @mouseenter="navShow = 2"
            @mouseleave="navShow = -1"
            @click="ViewCountDesc"
        >
          <div v-if="checkNav !== 2" @click="pageView">浏览量</div>
          <div v-else :class="checkNav === 2 ? 'active' : ''">
            浏览量由低到高
          </div>
        </div>
        <el-dropdown>
           <span class="el-dropdown-link">价格
             <el-icon class="el-icon--right">
                         <arrow-down/></el-icon>
           </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a" @click="priceUp">由高到低</el-dropdown-item>
              <el-dropdown-item command="b" @click="priceDown">由低到高</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div
            :class="navShow === 4 ? 'active' : ''"
            @mouseenter="navShow = 4"
            @mouseleave="navShow = -1"
            @click="ReleaseTimeDesc"
        >
          <div v-if="checkNav !== 4" @click="releaseTime">发布时间</div>
          <div v-else :class="checkNav === 4 ? 'active' : ''">
            发布时间由近到远
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "OrderContainer",
});
</script>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import {reqRecommend} from "@/apis/source";

// const props = defineProps<{recommendList:any}>()
// console.log(props)
const emit = defineEmits<{
  (event:'sales',type:number):void
  (event:'compRehen',type:number):void
  (event:'pageView'):void
  (event:'priceUp'):void
  (event:'priceDown'):void
  (event:'releaseTime'):void
}>()

// ----导航排序开关 和 请求
//pageSize
const pageSize = ref<number>(10)
//pageNum
const pageNum = ref<number>(1)
//移入移出样式
const navShow = ref<number>(0);
//当前选择样式
const checkNav = ref<number>(0);
//价格按钮 移入移出样式
const priceShow = ref<number>(0);
const checkPrice = ref<number>(0);
//推荐列表
const recommendList = ref<any>(null)

onMounted(()=> {
  getRecommendList()
})

//获取推荐列表资源
const getRecommendList = async ()=>{
  const res = await reqRecommend(pageSize.value,pageNum.value)
  recommendList.value = res.content
}

//点击综合排序
const Integrated = () => {
  checkNav.value = 0;
  checkPrice.value = 0;
};

//点击销量变化
const SellCountDesc = () => {
  checkNav.value = 1;
  checkPrice.value = 0;
};

//点击浏览量
const ViewCountDesc = () => {
  checkNav.value = 2;
  checkPrice.value = 0;
};

//点击价格变化


//点击发布时间
const ReleaseTimeDesc = () => {
  checkNav.value = 4;
  checkPrice.value = 0;
};

// 综合排序
const compRehen = async ()=>{
  await getRecommendList()
  emit('compRehen',1)
}

// 销量
const ss = ()=>{
  emit('sales',1)
}
// const propsToSale = ()=>{
//
// }
// const sales = ()=>{
//   recommendList.value.sort((a:any,b:any)=>{
//     return a.algorithmSortValue/1 - b.algorithmSortValue/1
//   })
// }

// 浏览量
const pageView = ()=>{
  // await getRecommendList()
  // recommendList.value.sort((a:any,b:any)=>{
  //   return a.statisticsBackup.viewCount/1 - b.statisticsBackup.viewCount/1
  // })
  emit('pageView')
}

// 价格由高到低
const priceUp = ()=>{
  // recommendList.value.sort((a:any,b:any)=>{
  //   return a.creatorBackup.level/1 - b.creatorBackup.level/1
  // })
  emit('priceUp')
}

// 价格由低到高
const priceDown = async () =>{
  // recommendList.value.sort((a:any,b:any)=>{
  //   return b.initExposureNum/1 - a.initExposureNum/1
  // })
  emit('priceDown')
}

// 发布时间
const releaseTime =  ()=>{
  // recommendList.value.sort((a:any,b:any)=>{
  //   return a.updateTime/1 - b.updateTime/1
  // })
  emit('releaseTime')
}


</script>

<style scoped lang="scss">
/*综合排序*/
.contain {
  width: 1200px;
  margin: 0 auto;
}

.works {
  display: flex;
  font-size: 14px;
  color: #7D8090;

  .active {
    color: #f93684;
  }
}

.works div {
  margin-left: 25px;
  margin-right: 30px;
}

.works div:hover {
  color: #f93684;
  /*变成小手*/
  cursor: pointer;
}

.works img {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
</style>
